<template>
	<el-dialog title="角色权限设置" v-model="visible" :width="650" destroy-on-close @closed="$emit('closed')" top="20px">
		<el-tabs tab-position="top" v-if="visible">
			<el-tab-pane label="菜单权限">
				<div class="treeMain">
					<el-tree ref="menu" node-key="id" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="数据权限">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="规则类型">
						<el-select v-model="form.data_scope" placeholder="请选择">
							<el-option label="全部数据权限" :value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="控制台">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="控制台视图">
						<el-select v-model="form.dashboard" placeholder="请选择">
							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
								<span style="float: left">{{ item.label }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
							</el-option>
						</el-select>
						<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: 'show',
				visible: false,
				isSaveing: false,
				parentSearch: {},
				role: {},
				menu: {
					list: [],
					checked: [],
					props: {
						children: 'children',
						label: (data) => {
							return data.meta.title
						}
					}
				},
				data: {
					list: [],
					checked: [],
					props: { label : 'name' },
				},
				form: {
					id: 0,
					menu: [],
					data_scope: 4,
					dashboard: 0
				},
				dashboardOptions: [
					{
						value: 0,
						label: '数据统计',
						views: 'stats'
					},	
				]
			}
		},
		mounted() {
			
		},
		methods: {
			//打开弹窗
			open(role_id) {
				this.getPermission(role_id)
				this.visible = true;
				return this
			},
			//表单注入数据
			setData(data, search) {
				this.parentSearch = search
				this.role = data
				this.form.id = data.id
				this.form.data_scope = data.data_scope
			},
			async submit(){
				this.isSaveing = true;
				//选中菜单
				this.form.menu = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
				var res = await this.$API.system.role.permission.post(this.form)
				this.isSaveing = false;
				if(res.code == 200) {
					this.visible = false;
					this.$message.success("操作成功")
					this.$emit('success', this.mode, this.parentSearch)
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
			//获取菜单
			async getMenu(){
				var res = await this.$API.system.menu.list.get()
				if(res.code == 200) {
					this.menu.list = res.data
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
				this.$nextTick(() => {
					let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
					this.$refs.menu.setCheckedKeys(filterKeys, true)
				})
			},
			//获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
			async getPermission(role_id) {
				//获取权限
				var res = await this.$API.system.role.roleMenu.get({id: role_id})
				if(res.code != 200) {
					this.$alert(res.message, "提示", {type: 'error'})
				} else {
					this.menu.checked = res.data.menu
					this.getMenu()
				}
			}
		}
	}
</script>

<style scoped>
	.treeMain {height:300px; overflow: auto; border: 1px solid #dcdfe6; margin-bottom: 10px;}
</style>
